<template>
  <div class="common_login_body"  @keyup.enter="login">
    <div class="common_login_section">
      <div class="common_login_top">
        <i class="common_top_logo"></i>
      </div>
      <div class="common_main">
        <!--下面的内容自由发挥-->
        <ul id="input_list">
          <li>
            <i class="input_logo user"></i>
            <input type="text" :placeholder="user_holder" id="user" autocomplete="off" v-model="user" :class="{'error':!userCheck}">
          </li>
          <li>
            <i class="input_logo pwd"></i>
            <input type="password" :placeholder="pwd_holder" id="pwd" autocomplete="off" v-model="pwd" :class="{'error':!pwdCheck}">
          </li>
        </ul>
        <p id="link_list">
          <a @click="linkTofordetPWD">忘记密码?</a>
        </p>
            <!--按钮也是公共的-->
        <button class="common_login_btn" @click="login">登录</button>
        <button class="common_register_btn" @click="register">注册</button>
        <!------------------->
      </div>
    </div>
    <!--tankuang -->
    <div class="tankuang_box" v-if="tankuangISshow">
      <div class="tankuang">
        <p class="tankuangMSG">{{tankuangMSG}}</p>
        <button class="tankuang_ok_btn" @click="tankuangISshowBTN">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        user:'',
        user_holder:'请输入用户名',
        userCheck:true,
        pwd:'',
        pwd_holder: '请输入密码',
        pwdCheck:true,
        tankuangISshow:false,
        tankuangMSG:''
      }
    },
    mounted: function() {

    },
    methods: {
      logins(){
        this.axios.post('/index/login',{
          user_phone:'13697087323',
          password:'123456789aaa'
        }).then((res)=>{
          if(res.data.code==1){
            this.$store.commit('login',true)
//            console.log(3)
            this.axios.get('/index/show_person').then((res)=>{
              if(res.data.code==1){
                this.$store.commit('userName',res.data.data.user_name)
                this.$store.commit('userPhone',res.data.data.user_phone)
                this.$store.commit('com_name',res.data.data.com_name)
                this.$store.commit('com_adress',res.data.data.address)
                this.$store.commit('com_sn',res.data.data.com_code)
                this.$router.push({
                  path: '/Index',
                  name: 'Index',
                  params: {
                    name: 'Index'
                  }
                })
              }
            })
          }else{
            this.tankuangMSG = res.data.msg
            this.tankuangISshow = true
          }
        })
      },
      login () {
        if(!this.user){
          this. userCheck = false
          this.user_holder = '用户名不得为空'
          return
        }else if(!this.pwd) {
          this.pwdCheck = false
          this.pwd_holder = '密码不得为空'
          return
        }
        this.axios.post('/index/login',{
          user_phone:this.user,
          password:this.pwd
        }).then((res)=>{
          if(res.data.code==1){
            this.$store.commit('login',true)
            this.axios.get('/index/show_person').then((res)=>{
              if(res.data.code==1){
                this.$store.commit('userName',res.data.data.user_name)
                this.$store.commit('userPhone',res.data.data.user_phone)
                this.$store.commit('com_name',res.data.data.com_name)
                this.$store.commit('com_adress',res.data.data.address)
                this.$store.commit('com_sn',res.data.data.com_code)
                this.$router.push({
                  path: '/Index',
                  name: 'Index',
                  params: {
                    name: 'Index'
                  }
                })
              }
            })
          }else{
            this.tankuangMSG = res.data.msg
            this.tankuangISshow = true
          }
        })
      },
      register () {
        this.$router.push({
          path: '/register',
          name: 'register',
          params: {
            name: 'register'
          }
        })
      },
      linkTofordetPWD () {
        this.$router.push({
          path: '/forgetPWD',
          name: 'forgetPWD',
          params: {
            name: 'forgetPWD'
          }
        })
      },
      tankuangISshowBTN(){
        this.tankuangISshow = false
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  /*@import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';*/

  #input_list{
    width:416px;
    margin:15px auto 0;
    border: 1px solid #ddd;
  }
  #input_list li{
    height:61px;
    padding-left:19px;
    display: flex;
    align-items: center;
  }
  #input_list li:first-child{
    border-bottom: 1px solid #F1F0F0;
  }
  #input_list .input_logo{
    width:17px;
    height:17px;
    display: inline-block;
    vertical-align: middle;
    margin-right:10px;
  }
  #input_list i.user{
    background: url("img/user.png");
  }
  #input_list i.pwd{
    background: url("img/pwd.png");
  }
  #input_list input{
    display: inline-block;
    vertical-align: middle;
    width:100%;
    height:100%;
    outline: none;
    border: none;
    font-size:15px;
    color: #444444;
    background-color: transparent;
    padding:0 0 0 10px;
  }
  #link_list:after{
    content: '';
    display: block;
    clear: both;
  }
  #link_list{
    width:416px;
    margin:0 auto;
  }
  #link_list>a{
    color: #888;
    font-size:15px;
    display: inline-block;
    line-height: 78px;
    cursor: pointer;
  }
  #link_list>a:first-child{
    float: left;
  }
  /*#link_list>a:last-child{*/
    /*float: right;*/
  /*}*/
  .common_register_btn{
    margin-top:17px;
  }
</style>
